<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">列表组</h5>
			</div>
			<div class="card-body">
				<ul class="list-group">
					<li class="list-group-item active">Disabled item</li>
					<li class="list-group-item">Second item</li>
					<li class="list-group-item disabled">Third item</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">链接列表项</h5>
			</div>
			<div class="card-body">
				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action">First item</a>
					<a href="#" class="list-group-item list-group-item-action">Second item</a>
					<a href="#" class="list-group-item list-group-item-action">Third item</a>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">多种颜色列表项</h5>
			</div>
			<div class="card-body">
				<ul class="list-group">
					<li class="list-group-item list-group-item-success">成功列表项</li>
					<li class="list-group-item list-group-item-secondary">次要列表项</li>
					<li class="list-group-item list-group-item-info">信息列表项</li>
					<li class="list-group-item list-group-item-warning">警告列表项</li>
					<li class="list-group-item list-group-item-danger">危险列表项</li>
					<li class="list-group-item list-group-item-primary">主要列表项</li>
					<li class="list-group-item list-group-item-dark">深灰色列表项</li>
					<li class="list-group-item list-group-item-light">浅色列表项</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">多种颜色链接的列表项</h5>
			</div>
			<div class="card-body">
				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
					<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
					<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
					<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
					<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
					<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
					<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
					<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
					<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
				</div>
			</div>
		</div>
	</section>
</body>

</html>